<script>
import axios from "axios";

export default {
  name: "Shop",
  data() {
    return {
      "selected_skin": {
        "name": "",
        "price": 0,
        "thumb": "",
        "webp": "",
        "afdian_url": "",
        "visible": false
      },
      "shop_skin_list": []
    }
  },
  methods: {
    setHoverState(name, isHovered) {
      const skin = this.shop_skin_list.find(skin => skin.name === name);
      if (skin) {
        skin.hovered = isHovered;
      }
    },
    getImageUrl(skin) {
      return skin.hovered ? skin.webp : skin.thumb;
    },
    showDialog(name) {
      const skin = this.shop_skin_list.find(skin => skin.name === name);
      if (skin) {
        this.selected_skin = {
          "name": skin.name,
          "price": skin.price,
          "thumb": skin.thumb,
          "webp": skin.webp,
          "afdian_url": skin.afdian_url,
          "visible": true
        }
      }
    },
    async getShopList() {
      let res
      try {
        res = (await axios.get('https://olc.xuehusang.cn/openlivechat/shop-skin-list')).data
      } catch {
        return
      }
      if (res.code === 0) {
        let tmp = res.shop_skin_list
        for (let skin of tmp) {
          skin.hovered = false
          this.shop_skin_list.push(skin)
        }
      } else {
        console.log('获取商品失败')
        this.$message.error({
          message: '获获商品失败',
          duration: '0'
        })
      }
    },
    jumpLink(url) {
      window.open(url,"_blank")
    }
  },
  mounted() {
    this.getShopList()
  }
}
</script>

<template>
  <div>
    <el-card :body-style="{ padding: '10px' }" class="box-card">
      <el-alert
          center
          style="margin-bottom: 5px;"
          type="success">
        <template #title>
          DLC皮肤上线，欢迎选购！
        </template>
      </el-alert>
      <el-dialog
        :title="selected_skin.name+' · 预览'"
        :visible.sync="selected_skin.visible"
        style="text-align: center"
        top="50px"
        width="80%">
        <el-image :src="selected_skin.webp"
                  fit="contain"
                  style="margin-top: -30px;align-items: center;display: flex;max-width: 560px;">
          <div slot="placeholder" class="image-slot">
            <el-skeleton animated loading="loading" style="width: 500px">
              <template slot="template">
                <el-skeleton-item
                  class="image-skeleton"
                  variant="image"
                />
              </template>
            </el-skeleton>
          </div>
        </el-image>
        <p style="text-align: left;">售价：{{ selected_skin.price }}电池</p>
        <el-button style="display: flow;float: right;margin-top: -40px;" type="primary" @click="jumpLink(selected_skin.afdian_url)">
          前往购买
        </el-button>
      </el-dialog>
      <el-row>
        <el-col v-for="(skin, index) in shop_skin_list" :key="skin.name" :span="12">
          <el-card :body-style="{ padding: '0px' }"
                   :style="index > 1 ? 'margin: 20px 10px 0 10px;' : 'margin: 0px 10px 0 10px;' "
                   class="card-container"
                   shadow="hover">
            <el-image :src="getImageUrl(skin)"
                      class="image"
                      fit="contain"
                      @mouseout="setHoverState(skin.name, false)"
                      @mouseover="setHoverState(skin.name, true)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
              <div slot="placeholder" class="image-slot">
                <el-skeleton animated loading="loading" style="width: 240px">
                  <template slot="template">
                    <el-skeleton-item
                      class="image-skeleton"
                      variant="image"
                    />
                  </template>
                </el-skeleton>
              </div>
            </el-image>
            <div style="padding: 14px;">
              <span>{{ skin.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ skin.price }}电池</time>
                <el-button class="button" type="text" @click="showDialog(skin.name)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  width: 100%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  margin: 10px;
  display: block;
  height: 253.5px;
}

.image-skeleton {
  margin: 10px;
  height: 253.5px;
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.card-container {
  height: 355px;
}
</style>